@(branch: String,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  pathList: List[String],
  fileName: Option[String],
  content: gitbucket.core.util.JGitUtil.ContentInfo,
  protectedBranch: Boolean,
  commit: String,
  newLineMode: String = "auto",
  useSoftTabs: Boolean = false,
  tabSize: Int = 8
)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@gitbucket.core.html.main(if(fileName.isEmpty) "New File" else s"Editing ${fileName.get} at ${branch} - ${repository.owner}/${repository.name}", Some(repository)) {
  @gitbucket.core.html.menu("files", repository){
    @if(protectedBranch){
      <div class="alert alert-danger">branch @branch is protected.</div>
    }
    <form method="POST" action="@helpers.url(repository)/@if(fileName.isEmpty){create}else{update}" validate="true" autocomplete="off">
      <span class="error" id="error-newFileName"></span>
      <span class="error" id="error-commit"></span>
      <div class="head">
        <a href="@helpers.url(repository)/tree/@helpers.encodeRefName(branch)">@repository.name</a> /
        @pathList.zipWithIndex.map { case (section, i) =>
          <a href="@helpers.url(repository)/tree/@helpers.encodeRefName((branch :: pathList.take(i + 1)).mkString("/"))">@section</a> /
        }
        <input type="text" name="newFileName" id="newFileName" class="form-control" placeholder="Name your file..." value="@fileName" style="display: inline; width: 300px;" aria-label="New file name"/>
        <input type="hidden" name="oldFileName" id="oldFileName" value="@fileName"/>
        <input type="hidden" name="branch" id="branch" value="@branch"/>
        <input type="hidden" name="path" id="path" value="@pathList.mkString("/")"/>
      </div>
      <table class="table table-bordered">
        <tr>
          <th>
            <div class="pull-right">
              <select id="wrap" class="form-control" style="margin-bottom: 0px; padding: 0px;" aria-label="Wrap">
                <optgroup label="Line Wrap Mode">
                  <option value="false">No wrap</option>
                  <option value="true">Soft wrap</option>
                </optgroup>
              </select>
            </div>
            <div class="pull-right">
              <select id="theme" class="form-control" style="margin-bottom: 0px; padding: 0px;" aria-label="Theme">
                <optgroup label="Editor Theme">
                  <option value="ambiance">Ambiance</option>
                  <option value="chaos">Chaos</option>
                  <option value="chrome">Chrome</option>
                  <option value="clouds">Clouds</option>
                  <option value="clouds_midnight">Clouds Midnight</option>
                  <option value="cobalt">Cobalt</option>
                  <option value="crimson_editor">Crimson</option>
                  <option value="dawn">Dawn</option>
                  <option value="dracula">Dracula</option>
                  <option value="dreamweaver">Dreamweaver</option>
                  <option value="eclipse">Eclipse</option>
                  <option value="github">GitHub</option>
                  <option value="gob">Gob</option>
                  <option value="gruvbox">Gruvbox</option>
                  <option value="idle_fingers">Idle Fingers</option>
                  <option value="iplastic">Iplastic</option>
                  <option value="katzenmilch">Katzenmilch</option>
                  <option value="kr_theme">Kr</option>
                  <option value="kuroir">Kuroir</option>
                  <option value="merbivore">Merbivore</option>
                  <option value="mono_industrial">Mono Industrial</option>
                  <option selected value="monokai">Monokai</option>
                  <option value="nord_dark">Nord Dark</option>
                  <option value="pastel_on_dark">Pastel on Dark</option>
                  <option value="solarized_dark">Solarized Dark</option>
                  <option value="solarized_light">Solarized Light</option>
                  <option value="sqlserver">Sqlserver</option>
                  <option value="terminal">Terminal</option>
                  <option value="textmate">Textmate</option>
                  <option value="tomorrow">Tomorrow</option>
                  <option value="tomorrow_night">Tomorrow Night</option>
                  <option value="tomorrow_night_bright">Tomorrow Night Bright</option>
                  <option value="tomorrow_night_eighties">Tomorrow Night Eighties</option>
                  <option value="twilight">Twilight</option>
                  <option value="vibrant_ink">Vibrant Ink</option>
                  <option value="xcode">Xcode</option>
                </optgroup>
              </select>
            </div>
            <div class="btn-group" data-toggle="buttons-radio">
              <input type="button" id="btn-code" class="btn btn-default btn-small active" value="Code">
              <input type="button" id="btn-preview" class="btn btn-default btn-small" value="Preview">
            </div>
          </th>
        </tr>
        <tr>
          <td>
            <div id="editor" style="width: 100%; height: 600px;"></div>
            <div id="preview" style="width: 100%; display: none;"></div>
          </td>
        </tr>
      </table>
      <div class="panel panel-default issue-comment-box">
        <div class="panel-body">
          <label for="message" class="strong">Commit changes</label>
          <div class="form-group">
            <input type="text" id="message" name="message" class="form-control"/>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <label class="radio">
                <input type="radio" id="newBranch" name="newBranch" value="false" checked>
                <i class='octicon octicon-git-commit'></i><span>Commit directly to the <strong style="background-color: lightblue; font-family: Consolas">@branch</strong> branch.</span>
              </label>
              <label class="radio">
                <input type="radio" id="newBranch"  name="newBranch" value="true">
                <i class='octicon octicon-git-pull-request'></i><span>Create a <strong>new branch</strong> for this commit and start a pull request.</span>
              </label>
            </div>
          </div>
          <div style="text-align: right;">
            @if(fileName.isEmpty){
              <a href="@helpers.url(repository)/tree/@helpers.encodeRefName((branch :: pathList).mkString("/"))" class="btn btn-default">Cancel</a>
            } else {
              <a href="@helpers.url(repository)/blob/@helpers.encodeRefName((branch :: pathList ++ Seq(fileName.get)).mkString("/"))" class="btn btn-default">Cancel</a>
            }
            <input type="submit" id="commitButton" class="btn btn-success" value="Commit changes" disabled="true"/>
            <input type="hidden" id="charset" name="charset" value="@content.charset"/>
            <input type="hidden" id="lineSeparator" name="lineSeparator" value="@content.lineSeparator"/>
            <input type="hidden" id="content" name="content" value=""/>
            <input type="hidden" id="initial" value="@content.content"/>
            <input type="hidden" id="commit" name="commit" value="@commit"/>
          </div>
        </div>
      </div>
    </form>
  }
}
<script src="@helpers.assets("/vendors/ace/ace.js")" type="text/javascript" charset="utf-8"></script>
<script src="@helpers.assets("/vendors/ace/ext-modelist.js")" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="@helpers.assets("/vendors/jsdifflib/difflib.js")"></script>
<link href="@helpers.assets("/vendors/jsdifflib/diffview.css")" type="text/css" rel="stylesheet" />
<script>
$(function(){
  $('#editor').text($('#initial').val());
  var editor = ace.edit("editor");

  if(typeof localStorage.getItem('gitbucket:editor:theme') == "string"){
    $('#theme').val(localStorage.getItem('gitbucket:editor:theme'));
  }

  editor.setTheme("ace/theme/" + $('#theme').val());

  $('#theme').change(function(){
    editor.setTheme("ace/theme/" + $('#theme').val());
    localStorage.setItem('gitbucket:editor:theme', $('#theme').val());
  });

  if(localStorage.getItem('gitbucket:editor:wrap') == 'true'){
    editor.getSession().setUseWrapMode(true);
    $('#wrap').val('true');
  }

  @if(fileName.isDefined){
    var modelist = ace.require("ace/ext/modelist");
    var mode = modelist.getModeForPath("@fileName.get");
    editor.getSession().setMode(mode.mode);
  }
  @if(protectedBranch){
    editor.setReadOnly(true);
  }
  editor.getSession().setOption("tabSize", @tabSize);
  editor.getSession().setOption("newLineMode", "@newLineMode");
  editor.getSession().setOption("useSoftTabs", @useSoftTabs);

  editor.on('change', function(){
    updateCommitButtonStatus();
  });

  function updateCommitButtonStatus(){
    if(editor.getValue() == $('#initial').val() && $('#newFileName').val() == $('#oldFileName').val()){
      $('#commitButton').attr('disabled', true);
    } else {
      $('#commitButton').attr('disabled', false);
    }
  }

  $('#wrap').change(function(){
    if($('#wrap option:selected').val() == 'true'){
      editor.getSession().setUseWrapMode(true);
      localStorage.setItem('gitbucket:editor:wrap', 'true');
    } else {
      editor.getSession().setUseWrapMode(false);
      localStorage.setItem('gitbucket:editor:wrap', 'false');
    }
  });

  $('#newFileName').watch(function(){
    updateCommitButtonStatus();
  });

  $('#commitButton').click(function(){
    $('#content').val(editor.getValue());
  });

  $('#btn-code').click(function(){
    $('#editor').show();
    $('#preview').hide();
    $('#btn-preview').removeClass('active');
  });

  $('#btn-preview').click(function(){
    $('#editor').hide();
    $('#preview').show();
    $('#btn-code').removeClass('active');

    @if(fileName.map(helpers.isRenderable _).getOrElse(false)) {
      // update preview
      $('#preview').html('<img src="@helpers.assets("/common/images/indicator.gif")"> Previewing...');
      $.post('@helpers.url(repository)/_preview', {
        content          : editor.getValue(),
        enableWikiLink   : false,
        filename         : $('#newFileName').val(),
        enableRefsLink   : false,
        enableLineBreaks : false,
        enableTaskList   : false
      }, function(data){
        $('#preview').empty().append(
          $('<div class="markdown-body" style="padding-left: 20px; padding-right: 20px;">').html(data));
        prettyPrint();
      });
    } else {
      // Show diff
      $('#preview').empty()
        .append($('<div id="diffText">'))
        .append($('<textarea id="newText" style="display: none;">').data('file-name',$("#newFileName").val()).data('val', editor.getValue()))
        .append($('<textarea id="oldText" style="display: none;">').data('file-name',$("#oldFileName").val()).data('val', $('#initial').val()));
      diffUsingJS('oldText', 'newText', 'diffText', 1);
    }
  });
});
</script>
